<template>
  <div class="mirror-tab1">
    <div class="tableBox">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        height="85vh"
        style="width: 100%"
        class="tableTh28"
        border
        stripe
        ref="table"
      >
        <el-table-column label="本地网" prop="areaName" min-width="90"></el-table-column>
        <el-table-column label="收入完成">
          <el-table-column label="主营收入完成率" min-width="120" prop="mainBusinessMonTotalRate"></el-table-column>
          <el-table-column label="基本面收入完成率" min-width="120" prop="baseMonTotalRate"></el-table-column>
          <el-table-column label="号码级收入完成率" min-width="120" prop="numberMonTotalRate"></el-table-column>
        </el-table-column>

        <el-table-column label="主量发展">
          <el-table-column label="移动净增完成率" min-width="120" prop="ydNetRate"></el-table-column>
          <el-table-column label="宽带净增完成率" min-width="120" prop="kdNetRate"></el-table-column>
          <el-table-column label="5G用户净增完成率" min-width="120" prop="user_5gNetRate"></el-table-column>
        </el-table-column>

        <el-table-column label="发展方式">
          <el-table-column label="高值主卡完成情况" prop="gzkCompleteRate"></el-table-column>
          <el-table-column label="有线宽带用户融合率">
            <el-table-column label="到达" prop="kdUserMixThisMonth"></el-table-column>
            <el-table-column label="年度变动" prop="kdUserMixYearChange"></el-table-column>
          </el-table-column>
        </el-table-column>

        <el-table-column label="客户经营">
          <el-table-column label="存存量收入保有率">
            <el-table-column label="保有率" prop="ccIncomeGap"></el-table-column>
            <el-table-column label="与目标差距" prop="czIncomeRate"></el-table-column>
          </el-table-column>
          <el-table-column label="存增量收入保有率">
            <el-table-column label="保有率" prop="czIncomeRate"></el-table-column>
            <el-table-column label="与目标差距" prop="czIncomeGap"></el-table-column>
          </el-table-column>
          <el-table-column label="移动用户月均离网率" prop="ydMonAvgLostRate"></el-table-column>
          <el-table-column label="宽带用户月均离网率" prop="kdMonAvgLostRate"></el-table-column>
        </el-table-column>

        <el-table-column label="用户质态">
          <el-table-column label="移动用户活跃率">
            <el-table-column label="到达" prop="ydActRateThisMon"></el-table-column>
            <el-table-column label="年度变动" prop="ydActRateYearChange"></el-table-column>
          </el-table-column>
          <el-table-column label="宽带用户活跃率">
            <el-table-column label="到达" prop="kdActRateThisMonth"></el-table-column>
            <el-table-column label="年度变动" prop="kdActRateYearChange"></el-table-column>
          </el-table-column>
          <el-table-column label="天翼高清活跃率">
            <el-table-column label="到达" prop="tyActRateThisMonth"></el-table-column>
            <el-table-column label="年度变动" prop="tyActRateYearChange"></el-table-column>
          </el-table-column>
        </el-table-column>

        <!-- <el-table-column label="收入完成">
          <el-table-column label="主营收入完成率" min-width="120" prop="mainBusinessMonTotalRate"></el-table-column>
          <el-table-column label="基本面收入完成率" min-width="120" prop="baseMonTotalRate"></el-table-column>
          <el-table-column label="号码级收入完成率" min-width="120" prop="numberMonTotalRate"></el-table-column>
        </el-table-column>

        <el-table-column label="主量发展">
          <el-table-column label="移动净增完成率" min-width="120" prop="ydNetRate"></el-table-column>
          <el-table-column label="宽带净增完成率" min-width="120" prop="kdNetRate"></el-table-column>
          <el-table-column label="5G用户净增完成率" min-width="120" prop="user_5gNetRate"></el-table-column>
        </el-table-column>

        <el-table-column label="发展方式">
          <el-table-column label="高值主卡完成情况" prop="gzkCompleteRate"></el-table-column>
          <el-table-column label="有线宽带用户融合率">
            <el-table-column label="到达" prop="kdUserMixThisMonth"></el-table-column>
            <el-table-column label="年度变动" prop="kdUserMixYearChange"></el-table-column>
          </el-table-column>
        </el-table-column>

        <el-table-column label="客户经营">
          <el-table-item label="存存量收入保有率">
            <el-table-item label="保有率" prop="ccIncomeGap"></el-table-item>
            <el-table-item label="与目标差距" prop="czIncomeRate"></el-table-item>
          </el-table-item>
          <el-table-column label="存增量收入保有率">
            <el-table-item label="保有率" prop="czIncomeRate"></el-table-item>
            <el-table-item label="与目标差距" prop="czIncomeGap"></el-table-item>
          </el-table-column>
          <el-table-column label="移动用户月均离网率" prop="ydMonAvgLostRate"></el-table-column>
          <el-table-column label="宽带用户月均离网率" prop="kdMonAvgLostRate"></el-table-column>
        </el-table-column>

        <el-table-column label="用户质态">
          <el-table-column label="移动用户活跃率">
            <el-table-column label="到达" prop="ydActRateThisMon"></el-table-column>
            <el-table-column label="年度变动" prop="ydActRateYearChange"></el-table-column>
          </el-table-column>
          <el-table-column label="宽带用户活跃率">
            <el-table-column label="到达" prop="kdActRateThisMonth"></el-table-column>
            <el-table-column label="年度变动" prop="kdActRateYearChange"></el-table-column>
          </el-table-column>
          <el-table-column label="天翼高清活跃率">
            <el-table-column label="到达" prop="tyActRateThisMonth"></el-table-column>
            <el-table-column label="年度变动" prop="tyActRateYearChange"></el-table-column>
          </el-table-column>
        </el-table-column>-->
      </el-table>
    </div>
  </div>
</template>

<script>
import { mergeSpan } from "@/utils/mixin";
export default {
  name: "basic-tab1",
  props: ["rowData1", "rawTime"],
  data() {
    return {
      tableData: [],
      tableLoading: false,
      spanArr: null,
      year: "",
      month: "",
      time: {},
      title1: [],
      title2: [],
      title3: [],
    };
  },
  methods: {
    //table合并行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex == 0 ||
        columnIndex == 1 ||
        columnIndex == 2 ||
        columnIndex == 3
      ) {
        return this.spanArr[rowIndex][columnIndex];
      }
    },

    init() {
      let that = this,
        year = that.rawTime.year,
        month = that.rawTime.month;
      that.year = +year;
      that.month = month;

      that.tableLoading = true;

      // if (that.rowData.data.length) {
      // 表头 1
      // let title1 = [
      //   {
      //     label: "主营收入完成率",
      //     it: [
      //       {
      //         label: "预算数",
      //         id: "",
      //       },
      //       {
      //         label: "完成数",
      //         id: "",
      //       },
      //       {
      //         label: "完成率",
      //         id: "",
      //       },
      //       {
      //         label: "月累计预算",
      //         id: "",
      //       },
      //       {
      //         label: "月累计预算完成率",
      //         id: "",
      //       },
      //     ],
      //   },
      //   {
      //     label: "基本面收入完成率",
      //     it: [
      //       {
      //         label: "预算数",
      //         id: "",
      //       },
      //       {
      //         label: "完成数",
      //         id: "",
      //       },
      //       {
      //         label: "完成率",
      //         id: "",
      //       },
      //       {
      //         label: "月累计预算",
      //         id: "",
      //       },
      //       {
      //         label: "月累计预算完成率",
      //         id: "",
      //       },
      //     ],
      //   },
      //   {
      //     label: "号码级收入完成率",
      //     it: [
      //       {
      //         label: "预算数",
      //         id: "",
      //       },
      //       {
      //         label: "完成数",
      //         id: "",
      //       },
      //       {
      //         label: "完成率",
      //         id: "",
      //       },
      //       {
      //         label: "月累计预算",
      //         id: "",
      //       },
      //       {
      //         label: "月累计预算完成率",
      //         id: "",
      //       },
      //     ],
      //   },
      // ];
      // for (let i = 1, j = 0; j < 3; i += 5, j++) {
      //   let t1 = that.rowData.titles.slice(i, i + 5);
      //   t1.map((it, k) => {
      //     title1[j].it[k].id = it;
      //   });
      // }
      // title1[2].it[4] = {
      //   label: "缺口",
      //   id: "numberGap",
      // };
      // that.title1 = title1;

      // // 表头 2
      // let title2 = [
      //   {
      //     label: "移动净增完成率",
      //     it: [
      //       {
      //         label: "预算数",
      //         id: "",
      //       },
      //       {
      //         label: "完成数",
      //         id: "",
      //       },
      //       {
      //         label: "完成率",
      //         id: "",
      //       },
      //     ],
      //   },
      //   {
      //     label: "宽带净增完成率",
      //     it: [
      //       {
      //         label: "预算数",
      //         id: "",
      //       },
      //       {
      //         label: "完成数",
      //         id: "",
      //       },
      //       {
      //         label: "完成率",
      //         id: "",
      //       },
      //     ],
      //   },
      //   {
      //     label: "5G用户净增完成率",
      //     it: [
      //       {
      //         label: "预算数",
      //         id: "",
      //       },
      //       {
      //         label: "完成数",
      //         id: "",
      //       },
      //       {
      //         label: "完成率",
      //         id: "",
      //       },
      //     ],
      //   },
      // ];
      // for (let ii = 17, jj = 0; jj < 3; ii += 3, jj++) {
      //   let t2 = that.rowData.titles.slice(ii, ii + 3);
      //   t2.map((it, k) => {
      //     title2[jj].it[k].id = it;
      //   });
      // }
      // that.title2 = title2;
      //}

      that.tableData = that.rowData1.data;
      that.$nextTick(() => {
        that.$refs.table.doLayout();
        that.tableLoading = false;
      });
    },
  },
};
</script>

<style lang="scss">
.mirror-tab1 {
  .cell {
    text-align: center;
  }
}
</style>